<template>
  <view class="checkin-container">

    <!-- 主要内容区域 -->
    <view class="content">
      <!-- 阅读统计 -->
      <view class="reading-summary">
        <text class="summary-text">今天读了{{ booksCount }}本书</text>
      </view>
      
      <!-- 心得输入提示 -->
      <view class="input-hint">
        <text class="hint-text">填写阅读心得，可以为空</text>
      </view>
      
      <!-- 心得输入框 -->
      <view class="input-container">
        <textarea 
          class="input-textarea" 
          v-model="readingNote" 
          placeholder="分享你的阅读感受，收获或想法..."
          :maxlength="200"
          :show-confirm-bar="false"
          :auto-height="true"
        ></textarea>
        <view class="char-count">
          <text class="count-text">{{ readingNote.length }}/200</text>
        </view>
      </view>
    </view>
    
    <!-- 底部发布按钮 -->
    <view class="footer">
      <view class="publish-btn" @click="publishCheckin">
        <text class="publish-text">发布打卡</text>
      </view>
    </view>
  </view>
</template>

<script>
import * as BookCheckInApi from '@/api/bookCheckIn'

export default {
  data() {
    return {
      statusBarHeight: 0,
      booksCount: 2,
      readingNote: ''
    }
  },
  
  onLoad(options) {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
    
    // 获取传递的参数
    if (options.booksCount) {
      this.booksCount = parseInt(options.booksCount);
    }
  },
  
  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack();
    },
    
    /**
     * 发布打卡
     */
    publishCheckin() {
      if (this.readingNote.trim().length === 0) {
        uni.showModal({
          title: '提示',
          content: '确定要发布空的打卡内容吗？',
          success: (res) => {
            if (res.confirm) {
              this.submitCheckin();
            }
          }
        });
      } else {
        this.submitCheckin();
      }
    },
    
    /**
     * 提交打卡数据
     */
    async submitCheckin() {
      try {
        uni.showLoading({
          title: '发布中...'
        });
        
        // 调用打卡API
        const response = await BookCheckInApi.createBookCheckInRecord({
          booksCount: this.booksCount,
          readingNotes: this.readingNote.trim()
        });
        
        uni.hideLoading();
        
        if (response.code === 0) {
          uni.showToast({
            title: '打卡成功！',
            icon: 'success',
            duration: 2000
          });
          
          // 延迟返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 2000);
        } else {
          uni.showToast({
            title: response.msg || '打卡失败',
            icon: 'none',
            duration: 2000
          });
        }
      } catch (error) {
        uni.hideLoading();
        console.error('打卡失败:', error);
        uni.showToast({
          title: '打卡失败，请重试',
          icon: 'none',
          duration: 2000
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.checkin-container {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 168rpx;
}

.status-bar {
  width: 100%;
  background-color: #fff;
}

// 顶部导航栏
.header {
  background: #fff;
  padding: 30rpx 40rpx;
  display: flex;
  align-items: center;
  position: relative;
  
  .back-btn {
    position: absolute;
    left: 40rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .back-icon {
      font-size: 48rpx;
      color: #333;
      font-weight: bold;
    }
  }
  
  .title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
}

// 主要内容区域
.content {
  margin: 40rpx;
  padding: 40rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

// 阅读统计
.reading-summary {
  margin-bottom: 60rpx;
  
  .summary-text {
    font-size: 48rpx;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
  }
}

// 输入提示
.input-hint {
  margin-bottom: 30rpx;
  
  .hint-text {
    font-size: 28rpx;
    color: #666;
  }
}

// 输入框容器
.input-container {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  position: relative;
  min-height: 300rpx;
  
  .input-textarea {
    width: 100%;
    min-height: 240rpx;
    font-size: 32rpx;
    color: #333;
    line-height: 1.6;
    border: none;
    outline: none;
    resize: none;
    
    &::placeholder {
      color: #999;
      font-size: 28rpx;
    }
  }
  
  .char-count {
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    
    .count-text {
      font-size: 24rpx;
      color: #999;
    }
  }
}

// 底部区域
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40rpx;
  background: #fff;
  border-top: 1rpx solid #f0f0f0;
  z-index: 999;
}

// 发布按钮
.publish-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .publish-text {
    font-size: 32rpx;
    color: #fff;
    font-weight: 600;
  }
  
  &:active {
    opacity: 0.8;
  }
}
</style>